import "../styles/TaskDetailCard.css";
const TaskDetailCard = () => {
  return (
    <div className="task-detail">
      <h2 className="detail-title">任务详情</h2>

      {/* 状态栏 */}
      <div className="status-bar">
        <div className="status-dropdown">
          <span className="status-text">进行中</span>
          <span className="arrow-down">▼</span>
        </div>
        <button className="edit-button">
          <span className="edit-icon">✎</span>
        </button>
      </div>

      {/* 任务信息 */}
      <div className="info-section">
        <div className="info-item">
          <label>任务编号</label>
          <span className="task-id">PN0001245</span>
        </div>

        <div className="info-item description">
          <label>任务描述</label>
          <p className="task-description">
            考虑登录和注册的UX交互形式，使用线框图建流程。完成后，展示给团队并讨论。将源附加到任务，虚登录和注册的UX，使用线框图创建流程。完成后，展示给团队并讨论。将源附加到任务列表。
          </p>
        </div>
      </div>

      {/* 附件区域 */}
      <div className="attachments-section">
        <div className="attachments-header">
          {/* <div className="attachment-tools">
                <button className="tool-button purple">
                  <span className="clip-icon"></span>
                </button>
                <button className="tool-button blue">
                  <span className="link-icon">🔗</span>
                </button>
              </div> */}
          <div className="tool-buttons">
            <button className="tool-btn">
              <i className="fas fa-paperclip"></i>
            </button>
            <button className="tool-btn">
              <i className="fas fa-link"></i>
            </button>
          </div>
          <h3>任务附件 (3)</h3>
        </div>

        {/* 附件列表 */}
        <div className="attachments-list">
          <div className="attachment-item">
            <div className="file-icon"></div>
            <div className="file-info">
              <span className="file-name">登录注册界面.png</span>
              <span className="file-size">1.0 MB PNG</span>
            </div>
            <button className="more-options">⋮</button>
          </div>

          <div className="attachment-item">
            <div className="file-icon"></div>
            <div className="file-info">
              <span className="file-name">其他原型.png</span>
              <span className="file-size">1.0 MB PNG</span>
            </div>
            <button className="more-options">⋮</button>
          </div>

          <div className="attachment-item link">
            <span className="link-text">在线预览原型</span>
          </div>
        </div>
      </div>
    </div>
  );
};

export default TaskDetailCard;
